<!--
    @CreationDate:2018/11/27
    @Author:齐奥飞
    @Function:弹框
-->
<template>
  <div class="dialog">
    <div class="dialog-mask"></div>
    <div class="dialog-content">
      <div class="content-header">
        <slot name="header">
          头部
        </slot>
      </div>
      <div class="content-content">
        内容
        <input type="text">
      </div>
      <div class="content-footer">
        尾部
      </div>
    </div>
  </div>
</template>
<script>
import { mapState } from "vuex";
export default {
  data() {
    return {};
  },
  mounted() {
    this.$store.state.showTabbar = false;
    // this.isShow = false;
  },
  computed: {
    ...mapState({
      isShow: "showTabbar"
    })
  },
  destroyed() {
    this.$store.state.showTabbar = true;
    // this.isShow = true;
  }
};
</script>
<style scoped lang="less">
.dialog {
  position: absolute;
  width: 100%;
  height: 100%;
  top: 0;
  left: 0;
  .dialog-mask {
    position: absolute;
    width: 100%;
    height: 100%;
    background-color: #ccc;
    z-index: 5;
  }
  .dialog-content {
    position: absolute;
    width: 100%;
    height: 50%;
    top:50%;
    left:50%;
    transform: translate(-50%,-50%);
    background-color: #fff;
    z-index: 6;
    .content-header{
      width: 100%;
      height: 40px;
      background-color: antiquewhite;
    }
    .content-footer{
      width: 100%;
      height: 40px;
      background-color: antiquewhite;
    }
  }
}
</style>
